<template>
    <div class="wrapper">
        <swiper :options="swiperOption" v-if="isRender">
            <!-- slides -->
            <swiper-slide v-for="item of list" :key="item.id" >
                <img class="swiper-img" :src="item.imgUrl" >
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> -->
            <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
        </swiper>
    </div>

</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    isRender () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper>>> .swiper-pagination-bullet-active
    background #fff !important
  .wrapper
    overflow :hidden
    width:100%
    height:0
    padding-bottom :26.6%
    .swiper-img
      width :100%
      height 2rem

</style>
